<template>
  <div class="right-top">
    <div class="warning">
      <div class="title-box">
        <span>智能预警</span>
      </div>
      <div class="warn-board">
        <div
          class="board-item"
          v-for="(item, key) in warnBoardList"
          :key="key"
          :style="{ background: `url(${getImage('home',item.bacImg)})` }"
        >
          <div class="item-name">{{ item.name }}</div>
          <span>
            {{ item.num }}
            <i>件</i>
          </span>
        </div>
      </div>
    </div>
    <div class="control">
      <div class="title-box">
        <span>智能巡控</span>
      </div>
      <div class="control-progress">
        <div
          class="progress-item"
          v-for="(item, key) in controlList"
          :key="key"
        >
          <!-- <el-progress :width="72" :color="item.color" type="circle" :percentage="item.progress">
            <span class="per-text">{{item.progress}}%</span>
          </el-progress>-->
          <div class="chartDom" :id="item.id"></div>
          <div class="item-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import { getImageUrl } from '@/util'


export default {
  setup(props) {
    const state = reactive({
      warnBoardList: [
        {
          name: "重点人预警",
          num: 218,
          bacImg: "warning-people",
        },
        {
          name: "重点车辆预警",
          num: 487,
          bacImg: "warning-car",
        },
        {
          name: "重点物品预警",
          num: 341,
          bacImg: "warning-goods",
        },
        {
          name: "其他预警",
          num: 218,
          bacImg: "warning-other",
        },
      ],
      controlList: [
        {
          id: "aa",
          progress: 60,
          color: "#388CFF",
          name: "见警率",
        },
        {
          id: "bb",
          progress: 96,
          color: "#6CFEFF",
          name: "管事率",
        },
        {
          id: "ddd",
          progress: 97.3,
          color: "#EDB200",
          name: "处突率",
        },
      ],
    });

    let getImage = getImageUrl

    const initChart = (item) => {
      const chartPie = document.getElementById(item.id);
      const chartDom = echarts.init(chartPie);
      const option = {
        title: [
          {
            text: item.progress + "%",
            x: "center",
            top: "35%",
            textStyle: {
              fontSize: "16",
              color: "#FFFFFF",
              fontFamily: "DIN Next LT Pro",
              foontWeight: "600",
            },
          },
        ],
        polar: {
          radius: "100%",
          center: ["50%", "50%"],
        },
        angleAxis: {
          max: 100,
          show: false,
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          //间隔？？？？
          {
            name: "",
            type: "bar",
            barWidth: 6,
            data: [0],
            coordinateSystem: "polar",
          },
          {
            name: "",
            type: "bar",
            barWidth: 6,
            data: [0],
            coordinateSystem: "polar",
          },
          {
            name: "",
            type: "bar",
            barWidth: 5,
            data: [0],
            coordinateSystem: "polar",
          },
          {
            name: "",
            type: "bar",
            roundCap: true,
            barWidth: 6,
            showBackground: true,
            backgroundStyle: {
              color: "#388CFF",
              opacity: "0.6",
            },
            data: [item.progress],
            coordinateSystem: "polar",

            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: item.color,
                  },
                  {
                    offset: 1,
                    color: item.color,
                  },
                ]),
              },
            },
          },
          {
            name: "",
            type: "pie",
            startAngle: 80,
            radius: ["96%"],
            hoverAnimation: false,
            center: ["50%", "50%"],
            itemStyle: {
              color: "rgba(66, 66, 66, .1)",
              borderWidth: 1,
              borderColor: item.color,
            },
            data: [100],
          },
          {
            name: "",
            type: "pie",
            startAngle: 80,
            radius: ["66%"],
            hoverAnimation: false,
            center: ["50%", "50%"],
            itemStyle: {
              color: "rgba(66, 66, 66, .1)",
              borderWidth: 1,
              borderColor: item.color,
            },
            data: [100],
          },
        ],
      };
      chartDom.setOption(option);
    };

    onMounted(() => {
      nextTick(() => {
        state.controlList.forEach((item) => {
          initChart(item);
        });
      });
    });

    return {
      ...toRefs(state),
      getImage
    };
  },
};
</script>


<style lang="scss" scoped>
.right-top {
  width: 100%;
  height: 203px;
  padding: 16px 22px;
  @include flex;
  .title-box {
    width: 150px;
    height: 25px;
    line-height: 25px;
    background: #2e74e3;
    background-color: rgba(46, 116, 227, 0.3);
    border-radius: 2px;

    padding-left: 8px;
    span {
      font-size: 14px;
      color: #ffffff;
      font-family: Source Han Sans CN;
      font-weight: bold;
      opacity: 1;
    }
  }
  .warning {
    width: 335px;
    .warn-board {
      width: 100%;
      @include flex;
      flex-wrap: wrap;
      margin-top: 16px;
      .board-item {
        width: 143px;
        height: 52px;
        background-image: url("@/assets/image/home/warning-car.png");
        background-size: 100% 100%;
        position: relative;
        margin-bottom: 22px;
        margin-right: 18px;
        .item-name {
          width: 82px;
          height: 18px;
          border: 1px solid #6cfeff;
          opacity: 1;
          color: #cbddff;
          font-size: 12px;
          line-height: 18px;
          padding: 0 2px;
          text-align: center;
          position: absolute;
          right: -4px;
          top: -6px;
        }
        span {
          position: absolute;
          right: 20px;
          bottom: 1px;
          font-family: DIN Next LT Pro;
          font-weight: bold;
          color: #edb200;
          font-size: 26px;
          i {
            font-size: 12px;
          }
        }
      }
    }
  }
  .control {
    .control-progress {
      @include flex;
      margin-top: 16px;
      padding-top: 24px;
      // width: 240px;
      .progress-item {
        text-align: center;
        margin-left: 20px;
        .chartDom {
          width: 70px;
          height: 70px;
        }
        .item-name {
          margin-top: 10px;
          font-size: 12px;
          color: #cbddff;
        }
        .per-text {
          font-size: 16px;
          font-family: DIN Next LT Pro;
          font-weight: bold;
          color: #ffffff;
        }
        &:first-child{
          margin-left: 12px;
        }
      }
    }
  }
}
</style>
